<template>
	<view class="pug-order-pay">
		<view class="pug-order-box">
			<view class="content">
				<view class="tit">酒店是：{{title}}</view>
				<view class="tit">订房必读</view>
				<view class="info">
					<view><text>3月27日 今天 <text class="dot">- 2晚 -</text> 3月39日 明天</text></view>
					<view><text>雅致双人房【赠送早餐】</text></view>
					<view><text>双床 无早餐 2人入驻 29㎡ 禁烟 靠窗</text></view>
					<view><text class="tag">15分钟内可免费取消</text><text class="tag">有优惠券</text></view>
				</view>
			</view>
			<view class="content">
				<view class="tit">订房必读</view>
				<view class="row">
					<text class="bidu">斯蒂芬斯蒂芬斯蒂芬是的斯蒂芬</text>
					<text class="bidu">斯蒂芬斯蒂芬斯蒂芬是的斯蒂芬</text>
					<text class="bidu">斯蒂芬斯蒂芬斯蒂芬是的斯蒂芬</text>
					<text class="bidu">斯蒂芬斯蒂芬斯蒂芬是的斯蒂芬</text>
				</view>
			</view>
			<view class="content">
				<view class="tit">入驻消息</view>
				<view class="row">
					<text class="label">房间数量</text>
					<input type="text" placeholder="请输入房间数量">
					<text class="icon">图标</text>
				</view>
				<view class="row">
					<text class="label">住客姓名</text>
					<input type="text" placeholder="请输入姓名">
					<text class="icon">图标</text>
				</view>
				<view class="row">
					<text class="label">联系手机</text>
					<input type="text" placeholder="请输入手机号码">
					<text class="icon">图标</text>
				</view>
				<view class="row">
					<text class="label">预计到店</text>
					<input type="text" placeholder="请输入到点时间">
					<text class="icon">图标</text>
				</view>
			</view>
			<view class="content">
				<view class="tit">入驻须知</view>
				<view class="row">
					<text class="label">促销优惠</text>
					<text class="text">促销优惠斯蒂芬促销优惠斯蒂芬促销优惠斯蒂芬</text>
				</view>
				<view class="row">
					<text class="label">注意事项</text>
					<text class="text">斯蒂芬框架是但是是 是地方地方斯蒂芬</text>
				</view>
				<view class="row">
					<text class="label">支付后返</text>
					<text class="text">斯蒂芬是打发斯蒂芬斯蒂芬是的发</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="price">
				<view class="m">￥250</view>
				<view class="c">￥250</view>
			</view>
			<view class="btn" @click="submitOrder">提交订单</view>
		</view>
	</view>
</template>

<style>
	page {
		background: #f8f8f8;
	}

	.pug-order-box {
		padding-bottom: 70px;
	}

	.pug-order-box .headerbox,
	.pug-order-box .content {
		margin: 10px;
		background: #fff;
		border-radius: 4px;
	}

	.pug-order-box .content {
		padding: 10px;
	}

	.pug-order-box .content .tit {
		font-weight: bold;
		font-weight: 13px;
		padding: 10px 0;
		border-bottom: 1px solid #f8f8f8
	}

	.pug-order-box .info {
		font-size: 12px;
		color: #787878;
	}

	.pug-order-box .info view {
		padding: 5px 0;
	}

	.pug-order-box .info view:first-child {
		font-size: 14px;
		color: #333;
		font-weight: bold
	}

	.pug-order-box .info view:first-child .dot {
		display: inline-block;
		background: #FF5722;
		color: #fff;
		border-radius: 10px;
		padding: 0 3px;
		margin: 0 4px;
	}

	.pug-order-box .info .tag {
		display: inline-block;
		margin-right: 10px;
		border: 1px solid #FF5722;
		padding: 2px 4px;
		border-radius: 10px;
	}

	.pug-order-box .info view:nth-child(2) {
		font-size: 14px;
		color: #333;
		font-weight: bold
	}

	.pug-order-box .content .row {
		display: flex;
		color: #787878;
		padding: 10px 0;
		font-weight: 13px;
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid #f8f8f8
	}

	.pug-order-box .content .row input[placeholder] {
		color: #999;
	}

	.pug-order-box .content .row input {
		color: #333;
		font-size: 13px;
	}

	.pug-order-box .content .row .icon {
		font-size: 20rpx;
	}

	.pug-order-box .content .row .bidu {
		font-size: 13px;
		line-height: 24px;
		padding: 3px 0;
	}

	.pug-order-box .content .row .bidu:before {
		content: "";
		display: inline-block;
		margin-right: 6px;
		width: 4px;
		height: 4px;
		position: relative;
		top: -4px;
		border-radius: 50%;
		background: #333;
	}

	.pug-order-box .content .row .label {
		width: 100px;
	}

	.pug-order-box .content .row .text {
		width: calc(100% - 100px);
		font-size: 13px;
		color: #333;
	}

	.pug-order-pay .footer {
		height: 65px;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background: #fff;
		box-shadow: 0 0 1em #bbb;
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
		flex-direction: row;
		align-items: center;
	}

	.pug-order-pay .footer .btn {
		background: #FF5722;
		color: #fff;
		border-radius: 20px;
		padding: 2px 20px;
		height: 28px;
		line-height: 28px;
		font-soze: 13px;
	}

	.pug-order-pay .footer .m {
		font-size: 18px;
		font-weight: bold;
		color: #FF5722;
	}

	.pug-order-pay .footer .c {
		font-size: 12px;
		text-decoration: line-through;
	}
</style>

<script>
	import orderService from '@/service/order/OrderService.js'
	export default {
		data() {
			return {
				hotelId:"",
				hotelDetailId:"",
				orderno:"",
				userorder:{},
				title:"",
				timer:null
			}
		},
		onLoad(e) {
			// 拿到所有的页面
			var pages = getCurrentPages();
			// 获取上一个页面的页面对象
			var prePage = pages[pages.length - 2];
			// 调用事件，获取data
			this.hotelDetailId = e.id;
			this.title = prePage.data.hotel.title
			// 动态设置状态栏的标题
			uni.setNavigationBarTitle({
				title: this.title 
			})
		},
		methods: {
			
			changeTitle(data){
				this.title =data.title;
			},
			
			async submitOrder() {
				var that = this;
				// 定时器关闭的支付，防止用户打开支付窗口但是，超时了，所以这个用定时器解决这个问题
				// if(that.timer)clearTimeout(that.timer);
				// that.timer = setTimeout(()=>{
				// 	// 支付成功进入
				// 	uni.navigateTo({
				// 		url:"/pagesorder/orderresult/orderresult?flag=0"
				// 	});	
				// },1000 * 60 * 20);
				
				// 1: 准备支付的用户的openid
				var openid = getApp().getUser().openid;
				var orderno = this.orderno;
				var hotelDetailId = this.hotelDetailId;
				
				// 2:开始发起异步请求到服务端进行微信支付和业务数据请求。
				var payParams = {openid,hotelDetailId,orderno};
				var res = await orderService.weixinpay(payParams);
				
				// 3: 微信支付返回的数据
				var dataMap = res.data.dataMap;
				that.userorder = res.data.userorder;
				that.orderno =  that.userorder.id;
				// ******************这里一定要记得赋值，修改订单的编号，用于更新支付状态
				payParams.orderno = that.userorder.id;
				// 拉起支付
				uni.requestPayment({
					// 支付类型 wxpay 微信支付
					provider: 'wxpay',
					// 支付时间
					timeStamp: dataMap.timeStamp,
					// 支付随机数
					nonceStr: dataMap.nonceStr,
					// 微信支付校验地址
					package: dataMap.package,
					// 微信支付加密算法
					signType: dataMap.signType,
					// 微信支付签名
					paySign: dataMap.paySign,
					// 支付成功以后的回调地址
					success: async function(res) {
						uni.$u.toast("支付成功");
						// 支付成功进行到订单修改
						const payresult = await orderService.paysuccess(payParams);
						if(that.timer)clearTimeout(that.timer);
						// 支付成功进入
						uni.navigateTo({
							//url:"/pagesorder/orderresult/orderresult?flag=1&orderno="+that.userorder.orderno+"&title="+that.userorder.hotelTitle
							url:"/pagesorder/orderresult/orderresult?flag=1"
						});	
					},
					// 支付失败的回调地址
					fail: function(err) {
						uni.$u.toast("支付失败");
						if(that.timer)clearTimeout(that.timer);
						// 支付成功进入
						uni.navigateTo({
							//url:"/pagesorder/orderresult/orderresult?flag=0&orderno="+that.userorder.orderno+"&title="+that.userorder.hotelTitle
							url:"/pagesorder/orderresult/orderresult?flag=0"
						});	
					}
				});

			}
		}
	}
</script>

<style>

</style>
